<template>
  <el-dialog
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeDialog"
      append-to-body
      title="添加审批人"
  >


    <el-form  :label-position="labelPosition"  label-width="70px" ref="form"  v-loading="loading">
      <el-form-item prop="nextNodes" label="审批人">
        <el-select v-model="addActorParam.actorId"
                   filterable
                   remote
                   reserve-keyword
                   :remote-method="querySysUserList"
                   placeholder="请输入"
                   size= "small"
                   :loading="accountQuery.loading">
          <el-option
              v-for="item in accountQuery.options"
              :key="item.userAccount"
              :label="item.username"
              :value="item.userAccount">
          </el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <div class="btn-group">
      <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
      <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addTaskActor} from "@/api/workflowTask"
import {getUserList} from '@/api/user'
export default {
  components:{
  },
  data() {
    return {

      labelPosition: 'left',
      dialogVisible: false,
      loading: false,
      workflowDetail:{},
      accountQuery:{
        options:[],
        loading:false

      },
      addActorParam:{
        taskId:"",
        actorId:""
      },
      queryParams:{
        pageNum:1,
        pageSize:100,
        userAccount:""
      }
    }
  },
  created() {
    this.querySysUserList();
  },
  methods: {
    async submit(){
      if(this.addActorParam.actorId === ''){
        this.$message.error("请选择审批人");
        return;
      }
      this.addActorParam.taskId = this.workflowDetail.details.taskId;
      let ret = await addTaskActor(this.addActorParam);
      if(ret.code === '200'){
        this.$message.success("添加成功");
        this.closeDialog();
      }else{
        this.$message.error(ret.message);
      }
    },
    async querySysUserList(query){
      this.loading = true;
      if(query !== ''){
        this.queryParams.userAccount = query;
      }
      let ret = await getUserList(this.queryParams);
      let content = ret.data;
      this.accountQuery.options = content.list;
      this.loading = false;
    },
    showDialog(row) {
      this.addActorParam.actorId = '';
      this.dialogVisible = true
      this.workflowDetail = row;
    },
    closeDialog() {
      this.dialogVisible = false
      this.loading = false
    },

  },

}
</script>


<style src="../../css/index.scss" lang="scss"></style>
<style lang="scss" scoped>
.search-item{
  float: left;
  margin: 0 20px 20px 0;
  span{
    color: #606266;
    font-size: 14px;
    margin-right: 0px;
  }
}
.workProcessClass{
  height: 500px;
  overflow: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: white;
}
.btn-group{
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}

</style>
